<template>
  <div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="list" v-for="item in list" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <div class="info">
                        <p>{{item.title}}</p>
                        <p>{{item.subtitle}}</p>
                        <p>{{item.price_info}}起</p>
                </div>
          </div>



        </van-list>
    </div>
</template>

<script>
import { listaction } from "../../api/topic/index.js"
  export default {
      data() {
        return {
          list:[],
          loading:false,
          finished:false,
          page:1

        }
      },
      methods:{
        onLoad(){
                listaction({
                  page:this.page
              }).then(res=>{
                    this.list.push(...res.data)
                    this.page+=1
                    this.loading=false
                  if(res.total==this.page-1){
                  this.finished =true 
                  }
              })
        
        }
      },
     
        
  }
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
        .list {
          width: 100%;
          height: 333px;
          img {
            width: 100%;
            height: 207px;
          }
          .info {
            width:100%;
            height: 87px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-content: center;
            background-color: #fff;

            p {
              display: block;
              width: 100%;
              text-align: center;
            }
          }
        }
.list .info p:nth-child(1){
  color: #333;
  font-size: 16px;
}
.list .info p:nth-child(2){
  color: #999;
  font-size: 12px;
}
.list .info p:nth-child(3){
  color: #b4282d;
  font-size: 15px;
}
</style>